<template>
  <div class="comment-container">
    <!-- 评论列表 -->
    <el-row justify="center" :gutter="20">
      <el-col :span="6" v-for="item in data" :key="item.id">
        <div class="news-card">
          <!-- 资讯状态标签 -->
          <div class="news-status" :class="item.type">
            {{ item.type }}
          </div>

          <div class="image-wrapper">
            <img @click="handleNews(item)" :src="item.avatar" :alt="item.name">
          </div>

          <div class="news-content">
            <h3 class="news-title" @click="handleNews(item)">
              {{ item.name }}
            </h3>

            <div class="news-info">
              <el-row class="info-row">
                <el-col :span="24">
                  <i class="el-icon-platform-eleme"></i>
                  <b>标题：<span>{{ item.title }}</span></b>
                </el-col>
              </el-row>
              <el-row class="info-row">
                <el-col :span="12">
                  <i class="el-icon-user"></i>
                  撰稿人：{{ item.author }}
                </el-col>
                <el-col :span="12">
                  <i class="el-icon-user"></i>
                  来源：{{ item.source }}
                </el-col>
              </el-row>
              <el-row class="info-row">
                <el-col :span="12">
                  <i class="el-icon-user"></i>
                  评论数：{{ item.reviewsCount }}
                </el-col>
                <el-col :span="12">
                  <i class="el-icon-user"></i>
                  点赞数：{{ item.thumbsCount }}
                </el-col>
              </el-row>
              <el-row class="info-row">
                <el-col :span="24">
                  <i class="el-icon-date"></i>
                  发布时间：<span>{{ formatDate(item.current, 'YYYY-MM-DD') }}</span>
                </el-col>
              </el-row>
            </div>

            <div class="news-description">
              {{ item.content || '暂无资讯描述' }}
            </div>

            <el-button type="primary" class="detail-button" @click="handleNews(item)">
              查看详情
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from "@/api";
import {formatDate} from "@/utils/date";
import {getCache} from "@/utils/useCache";

export default {
  name: "CommentView",
  data() {
    return {
      data: [], // 资讯列表数据
      news: [], // 资讯列表数据
      reviews: [], // 评论列表数据
      thumbs: [], // 资讯列表数据
      user: getCache('USERINFO'), // 资讯列表数据
    };
  },
  mounted() {
    this.fetchComments();
  },
  methods: {
    formatDate,
    // 获取评论列表
    async fetchComments() {
      const response = await api.news.newsList();
      this.news = response.data.data
      const response1 = await api.thumbs.thumbsList();
      this.thumbs = response1.data.data
      const response2 = await api.review.reviewList();
      this.reviews = response2.data.data

      let temp = [];
      for (let i = 0; i < this.news.length; i++) {
        let news = this.news[i];
        temp.push({
          ...news,
          thumbsCount: 0,
          reviewsCount: 0,
        });
      }
      for (let i = 0; i < temp.length; i++) {
        let news = temp[i];
        for (let j = 0; j < this.thumbs.length; j++) {
          const thumb = this.thumbs[j];
          if (news.id === thumb.newsId) {
            news.thumbsCount += 1
          }
        }
        for (let j = 0; j < this.reviews.length; j++) {
          const review = this.reviews[j];
          if (news.id === review.newsId) {
            news.reviewsCount += 1
          }
        }
      }

      let myThumbs = []
      for (let i = 0; i < this.thumbs.length; i++) {
        const thumb = this.thumbs[i];
        if (thumb.userId === this.user.id) {
          myThumbs.push(thumb)
        }
      }

      let all = [];
      for (let i = 0; i < temp.length; i++) {
        let tempElement = temp[i];
        for (let j = 0; j < myThumbs.length; j++) {
          let myThumb = myThumbs[j];
          if (myThumb.newsId === tempElement.id) {
            all.push(tempElement);
          }
        }
      }

      this.data = all;

    },
    handleNews(e) {
      const name = JSON.stringify(e.name);
      const id = JSON.stringify(e.id);
      this.$router.push({
        path: "/user/news_detail?id=" + id,
        query: {name},
      })
    },
  }
};
</script>

<style scoped>
.comment-container {
  background-color: #f5f7fa;
}

.comment-list {
  margin-top: 20px;
}

.comment-card {
  overflow: hidden;
  transition: transform 0.3s;
  margin-bottom: 20px;
}

.comment-card:hover {
  transform: translateY(-5px);
}

.comment-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaea;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.comment-user-info {
  flex: 1;
}

.comment-username {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.comment-date {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.comment-content {
  padding: 15px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}


.news-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  color: #303133;
}

.page-header h2 {
  color: #303133;
  margin-bottom: 10px;
}

.subtitle {
  color: #909399;
  font-size: 14px;
}

.news-card {
  position: relative;
  transition: all 0.3s;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.news-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  z-index: 1;
  background-color: #545f46;
}

.image-wrapper {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
  cursor: pointer;
}

.image-wrapper img:hover {
  transform: scale(1.05);
}

.news-content {
  padding: 15px;
  background-color: #fff;
}

.news-title {
  font-size: 16px;
  color: #303133;
  margin: 0 0 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-title:hover {
  color: #409EFF;
}

.news-info {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.info-row {
  margin-top: 8px;
}

.news-info i {
  margin-right: 4px;
}

.news-description {
  font-size: 13px;
  color: #909399;
  margin: 10px 0;
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.detail-button {
  width: 100%;
  margin-top: 10px;
}

:deep(.el-card__body) {
  padding: 0 !important;
  background-color: #fff !important;
}

</style>